<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>专辑</title>
		<script src="../../js/vue.js"></script>
		<script src="../../js/element.js"></script>
		<script src="../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/element.css" />
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/singer/album.css" />
	</head>
	<body>
		<div id="app">
			<!-- 歌手专辑列表 -->
			<div class="albumList">
				<div class="album" v-for="(album, index) in albumList">
					<div class="albumImg" >
						<img :src="album.albumImg"
							alt="" >
						<div class="mask" @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)" @click="mouseClick(album.albumId)">
							<i class="iconfont icon-24gf-playCircle"></i>
						</div>
					</div>
					<div class="albumName" @click="mouseClick(album.albumId)">{{album.albumName}}</div>
					<div class="albumReleaseTime">{{album.albumReleaseTime}}</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					albumList: '', //专辑信息
				}
			},
			mounted() { // 生命周期函数
				this.getFatherInfo()
			},
			methods: {
				// 获取父页面的一些数据
				getFatherInfo() {
					var data = window.parent.toChildData
					console.log(data)
					this.albumList = data.albumList
				},
				// 鼠标移入，图片上移
				mouseOver(index){
					console.log('鼠标移入')
					const imgDocument = document.querySelectorAll('.albumImg img')
					imgDocument[index].style.transform = 'translateY(-10px)'
				},
				// 鼠标移出，图片下移
				mouseLeave(index){
					console.log('鼠标移出')
					const imgDocument = document.querySelectorAll('.albumImg img')
					imgDocument[index].style.transform = 'translateY(0px)'
				},
				// 鼠标点击
				mouseClick(id){
					window.parent.getChildrenAlbumId(id)
				}
			},
		})
	</script>
</html>